<style lang="scss">
  .classify {
    .el-main {
      padding: 10px 16px 0px 16px;
      .cs-classify {
        border: 1px solid #eeeeee;
        width: 100%;
        .classify-search {
          background: #E5F1FB;
          border-left: 2px solid #2387e2;
          height: 52px;
          line-height: 52px;
          padding-left: 10px;
          position: relative;
          .is-active {
            .el-radio-button__inner {
              background-color: #409EFF;
              border-color: #409EFF;
            }
          }
          .search-my {
            float: left;
            // position: absolute;
            // top: 0px;
            // right: 466px;
          }
          .search-month {
            margin-left: 20px;
             float: left;
            // position: absolute;
            // top: 0px;
            // right: 12px;
            .el-range__close-icon {
              display: none;
            }
          }
        }
        .classify-data {
          text-align: center;
          width: 100%;
          height: calc(100vh - 148px);
          padding-top: 20px;
        }
      }
    }
  }
</style>

<template>
  <el-container class="classify">
    <!-- 主要区域容器 -->
    <el-main>
      <!-- 处室工单类别统计 -->
      <div class="cs-classify">
        <div class="classify-search">
          <div class="search-my">
            <el-radio-group v-model="classifyMonth" size="small" @change="deptClassifyItemChange">
              <el-radio-button label="1">本月</el-radio-button>
              <el-radio-button label="2">上月</el-radio-button>
              <el-radio-button label="3">本年</el-radio-button>
              <el-radio-button label="4">去年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-month">
            <span class="demonstration">自定义：</span>
            <el-date-picker v-model="classifyMonthValue" type="monthrange" align="right" unlink-panels  size="small"
              range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM"
              :picker-options="pickerOptions" @change="deptClassifyDefineChange">
            </el-date-picker>

          </div>
          <div style="float:right;margin-right:10px;">
               <el-button type="info" plain size="small" @click="doReset" icon="el-icon-refresh">重置</el-button>
          </div>
        </div>
        <div class="classify-data" id="deptClassifyChartDiv" ref="deptClassifyChartDiv" v-loading="loadingCharts"></div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  let echarts = require('echarts/lib/echarts')

  export default {
    data () {
      return {
        // 用户信息
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 处室查询条件
        countPojo: {
          deptId: '',
          dateList: '',
          dateItem: '',
          dateType: 'i'
        },
        pickerOptions: {
          shortcuts: [{
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 3)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        loadingCharts: false,
        classifyDeptId: '',
        classifyMonth: '3',
        classifyMonthValue: '',
        // 处室办理时效统计
        deptClassifyData: {
          name: '',
          value: ''
        }
      }
    },
    methods: {
      // 查询方法
      deptClassifyItemChange () {
        this.classifyMonthValue = ''
        this.countPojo.dateType = 'i'
        this.getDeptEffityCharts()
      },
      deptClassifyDefineChange () {
        this.classifyMonth = ''
        this.countPojo.dateType = 'd'
        this.getDeptEffityCharts()
      },
      // 条件重置
      doReset () {
        this.classifyMonth = '3'
        this.classifyMonthValue = ''
        this.countPojo.dateType = 'i'
        this.getDeptEffityCharts()
      },
      // 个处理办理时效统计
      getDeptEffityCharts () {
        const _this = this
        _this.countPojo.deptId = _this.userInfo.xtbmid
        _this.countPojo.dateList = _this.classifyMonthValue
        _this.countPojo.dateItem = _this.classifyMonth
        // console.log(_this.countPojo);
        _this.loadingCharts = true
        _this.$axios.post(_this.$api.countCharts.deptCategoriesCharts, _this.countPojo).then(rs => {
            _this.deptClassifyData = rs
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.deptClassifyChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: '处室类别工单数量',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
              },
              grid: {
                left: '56px',
                right: '60px',
                top: '40px',
                bottom: '100px',
                containLabel: false
              },
              calculable: false,
              xAxis: [
                {
                  name: '类别',
                  type: 'category',
                  data: undefined === _this.deptClassifyData ? [] : _this.deptClassifyData.name.split(','),
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0, // 全部显示
                    clickable: false, // 可点击
                    textStyle: {
                      fontSize: 12 // 让字体变大
                    },
                    rotate: 22
                  }
                }
              ],
              yAxis: [
                {
                  name: '工单数量(件)',
                  type: 'value',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                }
              ],
              series: [
                {
                  name: '工单数量(件)',
                  type: 'bar',
                  barCategoryGap: '50%',
                  data: undefined === _this.deptClassifyData ? [] : _this.deptClassifyData.value.split(','),
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 16, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      color: '#409EFF',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#409EFF'
                      }
                    }
                  }
                }
              ]
            })
        })
      }
    },
    created: function () {
      this.getDeptEffityCharts()
    }
  }
</script>
